<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/ctx.js"></script>
</head>
<style>

    #slider {
        position: absolute;
        left: 50%;
        top: 0px;
        background-color: #D3D3D3;
        width: 5px;
        height: 100%;
        z-index: 9999;
    }

    #slider:hover {
        cursor: ew-resize;
    }

</style>
<body>
<div id="cesiumContainer">
    <div id="slider"></div>
</div>
<div id="toolbar"></div>
<script>
    var initCesium = new InitCesium();
    var viewer = initCesium.initViewer('cesiumContainer', {
        imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
            url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
        }),
        baseLayerPicker : false,
        infoBox : false
    });

    var layers = viewer.imageryLayers;
    var earthAtNight = layers.addImageryProvider(new Cesium.IonImageryProvider({ assetId: 3812 }));
    earthAtNight.splitDirection = Cesium.ImagerySplitDirection.LEFT; // Only show to the left of the slider.

    // Sync the position of the slider with the split position
    var slider = document.getElementById('slider');
    viewer.scene.imagerySplitPosition = (slider.offsetLeft) / slider.parentElement.offsetWidth;

    var handler = new Cesium.ScreenSpaceEventHandler(slider);

    var moveActive = false;

    function move(movement) {
        if(!moveActive) {
            return;
        }

        var relativeOffset = movement.endPosition.x ;
        var splitPosition = (slider.offsetLeft + relativeOffset) / slider.parentElement.offsetWidth;
        slider.style.left = 100.0 * splitPosition + '%';
        viewer.scene.imagerySplitPosition = splitPosition;
    }

    handler.setInputAction(function() {
        moveActive = true;
    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
    handler.setInputAction(function() {
        moveActive = true;
    }, Cesium.ScreenSpaceEventType.PINCH_START);

    handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);

    handler.setInputAction(function() {
        moveActive = false;
    }, Cesium.ScreenSpaceEventType.LEFT_UP);
    handler.setInputAction(function() {
        moveActive = false;
    }, Cesium.ScreenSpaceEventType.PINCH_END);


</script>
</body>
</html>